import { Component } from 'react';
// 2 在 Login 页面组件中，使用 antd 的 Button 组件
import { Card, Form, Input, Button, Checkbox, message } from 'antd';
import logo from 'assets/logo.png';
// import './index.scss';
import styles from './index.module.scss';
import { loginAPI } from 'api/user';
console.log('styles--->', styles);
/*
  学习目标：解决样式冲突
  1. 重命名样式文件为 xxx.module.scss  xxx.module.less   xxx.module.css
  2. 使用JS的方式导入styles对象
  3. 通过.语法或[]去改名字，绑定styles对应属性的值
*/

export default class Login extends Component {
  onFinish = async (values) => {
    // console.log(values);
    try {
      const res = await loginAPI(values);
      // 1.跳转页面
      //2.存储token
      localStorage.setItem('geek-park', res.data.token);
      this.props.history.push('/');
      // 3. 提示用户 💥 注意不要使用alert
      message.success('登录成功', 1);
      // console.log(res);
    } catch (error) {
      // 4. 异常提示
      if (error.response) {
        message.warning(error.response.data.message);
      }
    }
  };
  render() {
    return (
      <div className={styles.login}>
        <h1 className={styles.color}></h1>
        {/* // 3 使用组件 */}
        <Card className={styles['login-container']}>
          {/* logo */}
          <img className={styles['login-logo']} src={logo} alt="" />

          {/* 表单 */}
          <Form
            autoComplete="off"
            //1.onFinish监听提交事件
            onFinish={this.onFinish}
            //2.initialValues 设置初始值
            initialValues={{
              mobile: '13811111111',
              code: '246810',
              agree: true,
            }}
          >
            <Form.Item
              name="mobile"
              rules={[
                { required: true, message: '手机号码不能为空!' },
                { pattern: /^1[3-9]\d{9}$/, message: '手机号输入11位' },
              ]}
            >
              <Input />
            </Form.Item>

            <Form.Item
              name="code"
              rules={[
                { required: true, message: '验证码不能为空!' },
                { pattern: /^\d{6}$/, message: '6位数字验证码格式' },
              ]}
            >
              <Input.Password />
            </Form.Item>

            <Form.Item
              name="agree"
              valuePropName="checked"
              rules={[
                {
                  // 💥注意2：自定义校验器 🔔 推荐文档上找相似的用法
                  validator: (_, value) => {
                    if (value === true) {
                      return Promise.resolve();
                    } else {
                      return Promise.reject(new Error('请阅读并勾选'));
                    }
                  },
                },
              ]}
            >
              <Checkbox>我已阅读并同意[隐私条款]和[用户协议]</Checkbox>
            </Form.Item>

            <Form.Item>
              <Button type="primary" htmlType="submit" block>
                登录
              </Button>
            </Form.Item>
          </Form>
        </Card>
      </div>
    );
  }
}
